<template>
	<view class="order-list" :class="themeName">
		<!-- Tabs -->
		<navbar title="订单收益"></navbar>

		<view class="query-line flex row-between">
			<view class="flex" @click="chooseQuery">
				<text>{{$zhTran('订单筛选')}}</text>
				<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)"></u-icon>
			</view>
			<view class="flex" @click="chooseSort">
				<text>{{sort.desc}}{{$zhTran('排序')}}</text>
				<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)"></u-icon>
			</view>
			<view class="flex" @click="chooseStatus">
				<text>{{status.desc}}</text>
				<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)"></u-icon>
			</view>
		</view>

		<!-- Order Lists -->
		<view class="order-item">
			<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
				  auto: false,
				  noMoreSize: 3,
				  empty: {
				  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
				  	tip: $zhTran('暂无订单~'),
				  	fixed: true
				  }
			  }" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="order-contain">
					<view class="order" v-for="item,idx in clientList" :key="idx ">
						<!-- Order Header -->

						<view class="order-header">

							<view class="order-sn">{{$zhTran('订单编号')}}: {{ item.order_info.sn }}</view>
							<template>
								<view :class="[
										'order-status', 
										`order-status--${orderStatus[item.order_info.order_status]['style']}`
									]">{{ item.order_info.order_status_desc }} </view>
							</template>
						</view>

						<view class="order-main">
							<view class="name m-b-10">{{item.order_info.user_name}}</view>
							<view class="flex row-between m-b-10">
								<view class="muted xs">{{$zhTran('联系电话')}}: {{item.order_info.user_mobile}}</view>
								<view class="muted xs">{{$zhTran('归属业务员')}}: {{item.saleman_info.user_name}}</view>
							</view>
							<view class="flex">
								<view class="muted xs m-r-10">{{$zhTran('订单金额')}}:</view>
								<view class="amount"> {{item.order_info.order_amount}}</view>
							</view>
							<view class="flex">
								<view class="muted xs m-r-10">{{$zhTran('订单收益')}}:</view>
								<view class="amount"> {{item.profit}}</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>

		<u-popup v-model="showVisible" mode="bottom" border-radius="14" :closeable="false"
			:safe-area-inset-bottom="true" @close="closePopup">
			<view class="query-box" v-if="mode == 'query'">
				<view class="query-header">
					<text>{{$zhTran('订单筛选')}}</text>
					<u-icon name="close" color="#666666" @tap="showVisible = false" />
				</view>

				<view class="query-main">
					<u-form :model="formModel" ref="uForm" :error-type="['message']">
						<u-form-item :label-width="140" :label="$zhTran('客户名称')" prop="user_name">
							<u-input v-model="formModel.user_name" :placeholder="$zhTran('请填写客户名称')" type="text" />
						</u-form-item>
						<u-form-item :label-width="140" :label="$zhTran('手机号码')" prop="user_mobile">
							<u-input v-model="formModel.user_mobile" :placeholder="$zhTran('请填写手机号')" type="text"
								maxlength="11" />
						</u-form-item>
						<u-form-item :label-width="150" :label="$zhTran('归属业务员')" prop="csppl_sale">
							<view class="flex row-between p-l-15" @click="chooseSaleman">
								<view class="sm muted">{{formModel.csppl_saleman}}</view>
								<u-icon name="arrow-right" color="#999999" />
							</view>
						</u-form-item>
					</u-form>
				</view>

				<view class="query-footer flex-1 flex row-around">
					<button hover-class="none" class="btn btn--cancel" size="md"
						@tap="resetPopup">{{$zhTran('重置')}}</button>
					<button hover-class="none" class="btn btn--confirm add" size="md"
						@tap="handelConfim">{{$zhTran('确定')}}</button>
				</view>
			</view>

			<view class="sort-box" v-if="['sort','status'].indexOf(mode) > -1">
				<view class="sort-header">{{mode=='sort'?'订单排序':'订单状态'}}</view>
				<view class="sort-main" v-if="mode == 'sort'">
					<view :class="sort.value == 'addtime'?'selected sort-sel':' sort-sel'"
						@click="sortList('addtime','下单时间')">{{$zhTran('下单时间')}}</view>
					<view :class="sort.value == 'order_amount'?'selected sort-sel':' sort-sel'"
						@click="sortList('order_amount','订单金额')">{{$zhTran('订单金额')}}</view>
					<view :class="sort.value == 'order_profit'?'selected sort-sel':' sort-sel'"
						@click="sortList('order_profit','订单收益')">{{$zhTran('订单收益')}}</view>
				</view>
				<view class="sort-main" v-else>
					<view :class="status.value == ''?'selected sort-sel':' sort-sel'" @click="statusList('','全部状态')">
						{{$zhTran('全部状态')}}
					</view>
					<view :class="status.value == 'wait_pay'?'selected sort-sel':' sort-sel'"
						@click="statusList('wait_pay','待支付')">{{$zhTran('待支付')}}</view>
					<view :class="status.value == 'done_pay'?'selected sort-sel':' sort-sel'"
						@click="statusList('done_pay','已支付')">{{$zhTran('已支付')}}</view>
					<view :class="status.value == 'wait_profit'?'selected sort-sel':' sort-sel'"
						@click="statusList('wait_profit','待确认收益')">{{$zhTran('待确认收益')}}</view>
					<view :class="status.value == 'done_profit'?'selected sort-sel':' sort-sel'"
						@click="statusList('done_profit','已确认收益')">{{$zhTran('已确认收益')}}</view>
					<view :class="status.value == 'cancel'?'selected sort-sel':' sort-sel'"
						@click="statusList('cancel','已取消')">{{$zhTran("已取消")}}</view>
				</view>
				<u-gap height="20" bg-color="rgba(246, 247, 249, 1)"></u-gap>
				<view class="sort-footer">
					<button hover-class="none" class="btn btn--cancel" size="md"
						@tap="showVisible=false">{{$zhTran("取消")}}</button>
				</view>
			</view>
		</u-popup>

	</view>
</template>


<script>
	import {
		apiCitySupplierProfitList
	} from '@/api/citysupplier'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		name: 'OrderList',
		mixins: [MescrollMixin],

		data() {
			return {
				csppl_id: '',
				clientList: [],
				showVisible: false,
				formModel: {
					user_name: '',
					user_mobile: '',
					csppl_sale: '',
					csppl_saleman: this.$zhTran('全部')
				},
				sort: {
					value: 'addtime',
					desc: this.$zhTran('下单时间'),
				},
				status: {
					value: '',
					desc: this.$zhTran('全部状态'),
				},
				mode: 'query',
				orderStatus: {
					0: {
						name: this.$zhTran('待付款'),
						style: 'primary',
					},
					1: {
						name: this.$zhTran('待发货'),
						style: 'primary',
					},
					2: {
						name: this.$zhTran('待收货'),
						style: 'primary',
					},
					3: {
						name: this.$zhTran('已完成'),
						style: 'primary',
					},
					4: {
						name: this.$zhTran('已关闭'),
						style: 'muted',
					}
				},
			}
		},

		computed: {},

		methods: {
			// 刷新订单数据 @Mixins【/src/mixins/order.js】内调用，请勿删除
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiCitySupplierProfitList({
					csppl_id: this.csppl_id,
					...this.formModel,
					sort: this.sort.value,
					status: this.status.value,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					count,
				}) => {
					if (num === 1) this.clientList = []
					this.clientList = [...this.clientList, ...lists]
					this.clientList = this.$zhTran(this.clientList)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},

			chooseSaleman() {
				var that = this
				uni.navigateTo({
					url: "/bundle2/pages/citysupplier/choose_saleman",
					success(res) {
						res.eventChannel.emit("receiveData", {
							csppl_id: that.csppl_id,
							csppl_sale: that.formModel.csppl_sale,
							del_sale: '',
							title: that.$zhTran('归属业务员'),
						});
					},
					events: {
						reSetData(nres) {
							console.log(nres)
							let res = that.$zhTran(nres)
							that.formModel.csppl_sale = res.value
							that.formModel.csppl_saleman = res.label
						}
					},
				});
			},
			resetPopup() {
				this.formModel = {
					user_name: '',
					user_mobile: '',
					csppl_sale: '',
					csppl_saleman: this.$zhTran('全部')
				}
			},
			closePopup() {
				this.showVisible = false
				this.$nextTick(() => {
					this.resetPopup()
				})
			},
			chooseQuery() {
				this.mode = 'query'
				this.showVisible = true
			},
			handelConfim() {
				this.refreshOrderData()
				this.closePopup()
			},
			chooseSort() {
				this.mode = 'sort'
				this.showVisible = true
			},
			sortList(row, desc) {
				this.sort.value = row
				this.sort.desc = this.$zhTran(desc)
				this.refreshOrderData()
				this.closePopup()
			},
			chooseStatus() {
				this.mode = 'status'
				this.showVisible = true
			},
			statusList(row, desc) {
				this.status.value = row
				this.status.desc = this.$zhTran(desc)
				this.refreshOrderData()
				this.closePopup()
			},
		},
		onLoad() {
			const options = this.$Route.query
			console.log(options)
			this.csppl_id = options.csppl_id

			this.refreshOrderData()
			setTimeout(() => {}, 0.5 * 1000)
		},
		onUnload() {},
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.order-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.query-line {
			padding: 20rpx 40rpx;
			margin: 20rpx 20rpx 0 20rpx;
			border-radius: 5px;
			background-color: #FFFFFF;
		}

		.order-item {
			flex: 1;
			min-height: 0;
		}
	}

	.order-contain {
		padding: 0 20rpx;
	}

	.order {
		padding: 0 20rpx;
		margin-top: 20rpx;
		border-radius: 5px;
		background-color: #FFFFFF;

		&-header {
			display: flex;
			height: 80rpx;
			align-items: center;
			padding: 30rpx;
			border-bottom: $-solid-border;

			.order-sn {
				font-size: $-font-size-nr;
			}

			.order-status {
				margin-left: auto;
				font-size: $-font-size-sm;

				&--primary {
					@include font_color()
				}

				&--muted {
					color: $-color-muted;
				}
			}
		}

		&-main {
			padding: 30rpx;

			.name {
				font-size: 32rpx;
				font-weight: bold;
			}

			.amount {
				color: rgba(64, 115, 250, 1);
				font-size: 28rpx;
			}
		}
	}

	.query {

		&-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			padding: 0 30rpx;
			font-weight: 500;
			font-size: $-font-size-md;
			background-color: #FFFFFF;
		}

		&-main {
			padding: 20rpx;
		}

		&-footer {
			padding: 0 20rpx env(safe-area-inset-bottom);
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: rgba(248, 248, 250, 1);

			.btn {
				flex: 1;

				&--cancel {
					color: rgba(38, 38, 38, 1);
					width: 48%;
				}

				&--confirm {
					background-color: rgba(64, 115, 250, 1);
					width: 48%;
					color: #fff;
				}
			}
		}
	}

	.sort {

		&-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			padding: 0 30rpx;
			font-weight: bold;
			font-size: 32rpx;
			background-color: #FFFFFF;
		}

		&-main {
			padding: 0 30rpx 30rpx 30rpx;

			.sort-sel {
				color: rgba(56, 56, 56, 1);
				background-color: rgba(246, 247, 249, 1);
				font-size: 28rpx;
				padding: 30rpx;
				text-align: center;
				margin-bottom: 15rpx;

				&.selected {
					color: #fff;
					background-color: rgba(64, 115, 250, 1);
				}
			}
		}

		&-footer {
			padding: 0 20rpx env(safe-area-inset-bottom);
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: #fff;

			.btn {
				flex: 1;

				&--cancel {
					color: rgba(38, 38, 38, 1);
				}
			}
		}
	}
</style>